<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="{{ url_for('static', filename='echarts.min.js') }}"></script>
    
  

    <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}">
    <script src="{{ url_for('static', filename='bootstrap/js/bootstrap.bundle.min.js') }}"></script>

</head>
  <body>
    <div class="container">
        <div class="row">
          <div class="col-sm text-center">
            <h1>
                boxplot示例
            </h1>
          </div>
        </div>
        

        

        <div class="row">
            <div class="col-sm text-center" id="main" style="width: 600px;height:400px;"></div>
        </div>
    </div>
    
    
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
  
        // 指定图表的配置项和数据
        option = {
          title: [
            {
              text: 'Michelson-Morley Experiment',
              left: 'center'
            },
            {
              text: 'upper: Q3 + 1.5 * IQR \nlower: Q1 - 1.5 * IQR',
              borderColor: '#999',
              borderWidth: 1,
              textStyle: {
                fontWeight: 'normal',
                fontSize: 14,
                lineHeight: 20
              },
              left: '10%',
              top: '90%'
            }
          ],
          dataset: [
            {
              // prettier-ignore
              source: [
                        {{x}}
                    ]
            },
            {
              transform: {
                type: 'boxplot',
                config: { itemNameFormatter: 'expr {value}' }
              }
            },
            {
              fromDatasetIndex: 1,
              fromTransformResult: 1
            }
          ],
          tooltip: {
            trigger: 'item',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '10%',
            right: '10%',
            bottom: '15%'
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            nameGap: 30,
            splitArea: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            name: 'km/s minus 299,000',
            splitArea: {
              show: true
            }
          },
          series: [
            {
              name: 'boxplot',
              type: 'boxplot',
              datasetIndex: 1
            },
            {
              name: 'outlier',
              type: 'scatter',
              datasetIndex: 2
            }
          ]
        };
console.log(option);
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


        
    </script>
  </body>
</html>